<!DOCTYPE html>

<!-- $Id: index.html 73 2012-03-12 13:08:27Z azbitnev@gmail.com $ -->

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
<meta http-equiv="Pragma" content="no-cache"/>
<meta http-equiv="Expires" content="-1"/>

<link href="../../css/basics.css" rel="stylesheet" type="text/css"/>
<link href="../../css/960c12.css" rel="stylesheet" type="text/css"/>
<link href="../../css/style.css" rel="stylesheet" type="text/css"/>
<!--[if lt IE 10]><link href="../../css/ie.css" rel="stylesheet" type="text/css"/><![endif]-->

<script type="text/javascript" charset="utf-8" src="../../jquery/1.7.1.js"></script> 

<title>jquery.ajp.editable - examples</title>

<link href="../../source/css/release/jquery.ajp.css" rel="stylesheet" type="text/css"/>
<link href="../../source/css/release/theme/jquery.ajp.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" charset="utf-8" src="../../source/release/jquery.ajp.js"></script> 

<style>

body { margin: 1em; }

#ex1 {
	background: #fff;
	border: 1px dashed #ccc;
	width: 660px;
	height: 200px;
	overflow: auto;
	padding: 6px;
	margin-bottom: 1em;
}

.toolbar {
	background: #eee;
	width: 674px;
	visibility: hidden;
}

.toolbar button {
	min-width: 3em;
	border: 0;
	float: left;
	margin: 0;
	opacity: 0.6;
	filter: alpha(opacity=60);
}

.toolbar button:hover {
	opacity: 1;
	filter: alpha(opacity=100);
}

.toolbar button:active {
	background: #ccc;
}

.toolbar .bold { font-weight: bold; }
.toolbar .italic { font-style: italic; }
.toolbar .underline { text-decoration: underline; }
.toolbar .strike { text-decoration: line-through; }

</style>

<script>

$(document).ready(function () {

	$('.toolbar button').each(function () {
		var $btn = $(this)
		var cmd = $btn.data('cmd')
		$btn.addClass(cmd).click(function () {
			var ctx = $('#ex1').ajp$editableContext()
			ctx.execCommand(cmd)
		})
	})

	$('.make-editable').click(function () {
		$('#ex1').ajp$editable()
		$('.toolbar').css({ visibility: 'visible', opacity: 0 }).animate({ opacity: 1 }, 'fast', 'swing')
	})

	$('.make-uneditable').click(function () {
		$('#ex1').ajp$uneditable()
		$('.toolbar').animate({ opacity: 0 }, 'fast', 'swing', function () { $(this).css({ visibility: 'visible', opacity: 0 }) })
	})

	$('.make-uneditable').click()
})

</script>

</head>

<body>

	<div class="toolbar">
		<button data-cmd="bold">B</button>
		<button data-cmd="italic">I</button>
		<button data-cmd="underline">U</button>
		<button data-cmd="strikethrough">S</button>
		<button data-cmd="h1">H1</button>
		<button data-cmd="h2">H2</button>
		<button data-cmd="h3">H3</button>
		<button data-cmd="h4">H4</button>
		<button data-cmd="h5">H5</button>
		<button data-cmd="h6">H6</button>
		<button data-cmd="anchor">link</button>
		<button data-cmd="text">clear</button>
		<div class="clear"></div>
	</div>

	<div id="ex1">
		This is editable area. You can use Ctrl+b, Ctrl+i, Ctrl+u, Ctrl+s, Ctrl+r, Ctrl+l, Ctrl+[1-6] shortcuts.
	</div>

	<button class="make-editable">Make editable</button>
	<button class="make-uneditable">Make uneditable</button>

</body>